<template>
	<div class="personal layout-pd">
		<el-row>
			<el-col :span="24">
				<el-card shadow="hover" class="mt15 personal-edit" header="站点配置">
					<el-form :model="state.postForm" size="default" label-width="140px" class="mt35 mb35">
						<el-row :gutter="35">
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<el-form-item label="站点底部中文内容" prop="content">
									<Editor v-model:get-html="state.postForm.foot_content" key="conent_zh" />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<el-form-item label="站点底部英文内容" prop="en_content">
									<Editor v-model:get-html="state.postForm.en_foot_content" key="conent_en" />
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
					<div style="width: 100%; display: flex; justify-content: center; align-items: center;">
						<el-button type="primary" @click="onSubmit" size="default">保存</el-button>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts" name="personal">
import { reactive, ref, nextTick, defineAsyncComponent, onMounted } from 'vue';
import { configDetailByCode, updateConfig } from '/@/api/config';
import { ElMessage } from 'element-plus';
// 引入组件
const Editor = defineAsyncComponent(() => import('/@/components/editor/index.vue'));

// 定义变量内容
const state = reactive({
	postForm: {
		name: '站点信息',
		code: 'SITE_INFO',
		foot_content: '',
		en_foot_content: '',
	},
});

// 页面加载时
onMounted(() => {
	initData();
});

const initData = () => {
	configDetailByCode(state.postForm.code).then((res: any) => {
		if (res.status === 'success') {
			if (res.data.content) {
				let contentObj = JSON.parse(res.data.content);
				state.postForm.foot_content = contentObj.foot_content;
				state.postForm.en_foot_content = contentObj.en_foot_content;
			}
		}
	});
};

// 提交
const onSubmit = () => {
	let requestData = {
		name: '站点信息',
		code: 'SITE_INFO',
		content: JSON.stringify({ foot_content: state.postForm.foot_content, en_foot_content: state.postForm.en_foot_content }),
	};
	updateConfig(requestData).then((res: any) => {
		if (res.status === 'success') {
			ElMessage.success('操作成功');
		} else {
			ElMessage.error(res.msg);
		}
	});
};
</script>

<style scoped lang="scss"></style>
